<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>vue中的数据代理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>

    <!-- 
        vue中的数据代理：
            通过vm对象来代理data对象中属性的操作(读/写)
        vue中数据代理的好处:
            更加方便的操作data中的数据
        基本原理：
            通过Object.defineProperty()把 data对象中所有属性添加到vm上。
            为每一个添加到vm上的属性，都指定一个getter/setter。
            在getter/setter内部去操作(读/写)data中对应的属性。
     -->

    <div id="root">
        <h1>你好, {{name}}</h1> <br/>
        <h1>地址, {{address}}</h1>

    </div>
    
    <!-- 数据代理：通过一个对象代理对另一个对象中属性的操作 (读/写) -->
    <script type="text/javascript">
      const vm = new new Vue({
        el:'#root',
        data:{
            name: '徐亚远',
            address:'河南省商丘市'
        }
      })

    </script>


</body>

</html>